@import models.Tables.DealRow
@(deal: Option[DealRow])(implicit request: RequestHeader)
@user.main("数据一览")("view") {
	<div class="page-content">

		<div class="page-bar">
			<ul class="page-breadcrumb">
				<li>
					<i class="fa fa-table"></i>
					<a href="@routes.MetaboliteController.toIndex()">数据一览</a>
				</li>
			</ul>
		</div>


		<div class="row-fluid">

			<div class="row">
				<div class="col-md-12 col-sm-12">
					<div class="portlet green-jungle box">
						<div class="portlet-title">
							<div class="caption">
								基本信息
							</div>
						</div>
						<div class="portlet-body">
							<div class="table-responsive">
								<table class="table table-hover table-bordered table-striped" style="table-layout: fixed;
									word-wrap: break-word">
									<tbody>

										<tr>
											<th>
												项目名称
											</th>
											<td>
											@request.session.get("projectName")
											</td>
										</tr>

										<tr>
											<th>
												样品名称
											</th>
											<td id="sampleNames">

											</td>
										</tr>

									</tbody>
								</table>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="row">
				<div class="col-md-12 col-sm-12">
					<div class="portlet green-jungle box">
						<div class="portlet-title">
							<div class="caption">
								数据预处理
							</div>
						</div>

						<div class="portlet-body">

							<form class="registration-form form-horizontal" id="form"
							accept-charset="UTF-8" method="post">

								<label>请选择处理方法:</label>
								<div class="checkbox">

									<label style="margin-right: 15px">
										<input name="delete" onchange="myDelete(this)" type="checkbox" checked >
										异常值删除</label>
									<label style="margin-right: 15px">
										<input name="replace" onchange="myReplace(this)" type="checkbox" checked>
										缺失值替换</label>
									<label style="margin-right: 15px"><input name="normal" onchange="myNormal(this)" type="checkbox" checked>
										数据归一化</label>
								</div>

								<div id="delete">
									<h4>异常值删除</h4>
									<div class="form-group">
										<label class="control-label col-sm-2">IQR系数<span id="question1" style="margin-bottom: 5px">
											<a type="button" title="说明" data-container="body" data-toggle="popover"
											data-placement="right" data-content="默认非异常值区间范围：[0，Q3+1.5*IQR]。"
											data-trigger="hover"><i class="fa fa-question-circle-o"></i></a>
										</span>:</label>
										<div class="col-sm-3">
											<input name="iqr" id="iqr" class="form-control" value="1.5"></input>
										</div>
									</div>
								</div>

								<div id="replace">
									<h4>缺失值替换</h4>

									<div class="form-group">
										<label class="control-label col-sm-2">方法<span id="question2" style="margin-bottom: 5px">
											<a type="button" title="KNN算法说明" data-container="body" data-toggle="popover"
											data-placement="right" data-content="KNN算法使用K个近邻来填充数据集中的缺失值。对于
											每个具有缺失值的行，将搜索其K个最相似的行数据，并使用这些行数据的值来填充缺失值。"
											data-trigger="hover"><i class="fa fa-question-circle-o"></i></a>
										</span>:</label>
										<div class="col-sm-3">
											<select class="form-control" onchange="replaceChange(this)" name="replaceMethod">
												<option selected value="最小正数的倍数">coef * 数据矩阵中的最小正数</option>
												<option>指定某个值</option>
												<option>KNN</option>
											</select>
										</div>
									</div>

									<div class="form-group" id="rate">
										<label class="control-label col-sm-2">coef:</label>
										<div class="col-sm-3">
											<input name="rate" class="form-control" value="0.5">
										</div>
									</div>

									<div class="form-group" id="assignValue" style="display: none">
										<label class="control-label col-sm-2">指定的值:</label>
										<div class="col-sm-3">
											<input name="assignValue" class="form-control" value="0.001"></input>
										</div>
									</div>

									<div class="form-group" id="kValue" style="display: none">
										<label class="control-label col-sm-2">K值:</label>
										<div class="col-sm-3">
											<input name="kValue" class="form-control" value="10"></input>
										</div>
									</div>

								</div>


								<div id="normal">
									<h4>数据归一化</h4>

									<div class="form-group">
										<label class="control-label col-sm-2">归一化方法:</label>
										<div class="col-sm-3">
											<select class="form-control" onchange="normalChange(this)" name="normalMethod"
											>
												<option selected>内标归一化</option>
												<option>峰面积归一化</option>
											</select>
										</div>
									</div>

									<div id="innerNormal" style="display: block;">
										<div class="form-group">
											<label class="control-label col-sm-2">内标样品:</label>
											<div class="col-sm-3">
												<select class="form-control colName" name="colName" id="colName"
												style="width: 100%">
												</select>
											</div>
										</div>

										<div class="form-group">
											<label class="control-label col-sm-2">内标代谢物:</label>
											<div class="col-sm-3">
												<select class="form-control rowName" name="rowName" id="rowName"
												style="width: 100%">
												</select>
											</div>
										</div>
									</div>

									<div id="peakAreaNormal" style="display: none;">
										<div class="form-group">
											<label class="control-label col-sm-2">峰面积归一化求和值<span id="question3" style="margin-bottom: 5px">
												<a type="button" title="说明" data-container="body" data-toggle="popover"
												data-placement="right" data-content="峰面积归一化后，为每个样品对应列的求和值，
												每个样品的求和值均为此值，且相等。"
												data-trigger="hover"><i class="fa fa-question-circle-o"></i></a>
											</span>:</label>
											<div class="col-sm-3">
												<input name="coefficient" id="coefficient" class="form-control" value="10000"></input>
											</div>
										</div>
									</div>
								</div>


								<div class="form-group">
									<div class="actions col-sm-offset-2 col-sm-3">
										<button type="button" class="btn btn-primary" style="width: 90%;" id="search" onclick="mySearch()">
											应用</button>
									</div>
								</div>


							</form>

						</div>
					</div>
				</div>
			</div>

			<div class="row">
				<div class="col-md-12 col-sm-12">
					<div class="portlet green-jungle box">
						<div class="portlet-title">
							<div class="caption">
								数据列表（预处理后）<span id="question5" style="margin-bottom: 5px">
								<a type="button" title="说明" data-container="body" data-toggle="popover"
								data-placement="right" data-content="后续的分析内容（如差异，热图等）均基于此数据矩阵。如果不进行任何预处理操作，则输出原始数据矩阵结果用于后续的分析。"
								data-trigger="hover"><i class="fa fa-question-circle-o" style="color: white"></i></a>
							</span>
							</div>
						</div>

						<div class="portlet-body">

							<label>显示的样品:</label>
							<div id="checkbox" class="checkbox">


							</div>

							<div class="table-responsive">

								<table class="display table table-bordered table-hover table-striped" id="table" data-pagination="true" data-search="true"
								data-toolbar="#toolbar" data-page-list="[10, 25, 50, 100]" data-multiple-search="true"
								data-show-export="true" data-export-types="['excel','txt']" data-export-data-type="all"
								>
									<thead>
										<th data-field='geneId' data-sortable='true' id="marker"
										data-formatter="metaboliteIDFmt">代谢物名称</th>
									</thead>
								</table>

							</div>
						</div>
					</div>
				</div>
			</div>


		</div>

	</div>


	<script>
			$(function () {
				$.ajax({
					url: "@routes.MetaboliteController.getSampleNames()",
					type: "get",
					dataType: "json",

					success: function (data) {
						var sampleNameStr = data.sampleNames.join("&nbsp;&nbsp;")
						$("#sampleNames").html(sampleNameStr)
						$(".colName").select2(
								{
									data: data.sampleNames,
								}
						);
						var checkboxHtml = ""
						$.each(data.sampleNames, function (i, v) {
							checkboxHtml += "<label style='margin-right: 15px'>" +
									"<input type='checkbox' checked='checked' value='" + v + "' onclick=\"setColumns('" + v + "')\">" + v +
									"</label>"
						})
						$("#checkbox").empty().append(checkboxHtml)
						var html = ""
						$.each(data.sampleNames, function (i, v) {
							html += "<th data-field='" + v + "' data-sortable='true'>" + v + "</th>"
						})
						$("#marker").after(html)
						$('#table').bootstrapTable({
							exportOptions: {
								csvSeparator: "\t"
							}
						});
					}
				})

				$.ajax({
					url: "@routes.MetaboliteController.getGeneIds()",
					type: "get",
					dataType: "json",

					success: function (data) {
						$(".rowName").select2(
								{
									data: data.geneIds,
								}
						);

					}
				})

				@if(deal.isEmpty){
				$("input[name='delete']").attr("checked", false).trigger("change")
				$("input[name='replace']").attr("checked", false).trigger("change")
				$("input[name='normal']").attr("checked", false).trigger("change")
				}else{
				@if(deal.get.delete.isDefined){
				$("input[name='delete']").attr("checked", true).trigger("change")
				$("input[name='iqr']").val(@deal.get.iqr)
				}else{
				$("input[name='delete']").attr("checked", false).trigger("change")
				}

				@if(deal.get.replace.isDefined){
				$("input[name='replace']").attr("checked", true).trigger("change")
				$("[name='replaceMethod']").val("@deal.get.replacemethod").trigger("change")

				@if(deal.get.replacemethod=="指定某个值"){
				$("[name='assignValue']").val(@deal.get.assignvalue)
				}
				@if(deal.get.replacemethod == "最小正数的倍数") {
				$("[name='rate']").val(@deal.get.rate)
				}
				@if(deal.get.replacemethod == "KNN") {
				$("[name='kValue']").val(@deal.get.kvalue)
				}
				}else{
				$("input[name='replace']").attr("checked", false).trigger("change")
				}

				@if(deal.get.normal.isDefined){
				$("input[name='normal']").attr("checked", true).trigger("change")
				$("[name='normalMethod']").val("@deal.get.normalmethod").trigger("change")
				@if(deal.get.normalmethod=="内标归一化"){
				$("[name='colName']").val("@deal.get.colname").select2()
				$("[name='rowName']").val("@deal.get.rowname").select2()
				}else{
				$("[name='coefficient']").val(@deal.get.coefficient)
				}
				}else{
				$("input[name='normal']").attr("checked", false).trigger("change")
				}
				}

				$.ajax({
					url: "@routes.MetaboliteController.getData()",
					type: "get",
					dataType: "json",
					success: function (data) {
						$('#table').bootstrapTable("load", data.array)
					}
				})

				bootstrapValidator()


			})

			function myNormal(element) {
				if ($(element).is(":checked")) {
					$('#normal').show()
				} else {
					$('#normal').hide()
				}
			}

			function myDelete(element) {
				if ($(element).is(":checked")) {
					$('#delete').show()
				} else {
					$('#delete').hide()
				}
			}

			function myReplace(element) {
				if ($(element).is(":checked")) {
					$('#replace').show()
				} else {
					$('#replace').hide()
				}
			}

			function normalChange(element) {
				var value = $(element).find(">option:selected").val()
				if (value == "内标归一化") {
					$("#innerNormal").show()
					$("#peakAreaNormal").hide()
				} else {
					$("#innerNormal").hide()
					$("#peakAreaNormal").show()
				}
			}

			function replaceChange(element) {
				var value = $(element).find(">option:selected").val()
				if (value == "最小正数的倍数") {
					$("#rate").show()
					$("#assignValue,#kValue").hide()
				} else if (value == "指定某个值") {
					$("#assignValue").show()
					$("#rate,#kValue").hide()
				} else {
					$("#kValue").show()
					$("#rate,#assignValue").hide()
				}
			}

			function mySearch() {
				var form = $("#form")
				var fv = form.data("bootstrapValidator")
				fv.validate()
				if (fv.isValid()) {
					var element = "<div id='content'><span id='info'>正在处理数据...</span>&nbsp;<img class='runningImage' src='/assets/images/running2.gif' style='width: 30px;height: 20px;'></div>"
					var index = layer.alert(element, {
						skin: 'layui-layer-molv'
						, closeBtn: 0,
						title: "信息",
						btn: []
					});
					$.ajax({
						url: "@routes.MetaboliteController.dataDeal()",
						type: "post",
						data: $("#form").serialize(),
						success: function (data) {
							layer.close(index)
							if (data.valid == "false") {
								swal("错误", data.message, "error")
							} else {
								$('#table').bootstrapTable("load", data.array)
							}

						}
					});
				}

			}

			function setColumns(value) {
				var element = $("input:checkbox[value=" + value + "]")
				if (element.is(":checked")) {
					$('#table').bootstrapTable('showColumn', value);
				} else {
					$('#table').bootstrapTable('hideColumn', value);
				}
			}

			var infinityNumber = Number.MAX_VALUE

			function bootstrapValidator() {
				$('#form').bootstrapValidator({
					framework: 'bootstrap',
					icon: {
						valid: 'glyphicon glyphicon-ok',
						invalid: 'glyphicon glyphicon-remove',
						validating: 'glyphicon glyphicon-refresh'
					},
					fields: {
						coefficient: {
							validators: {
								notEmpty: {
									message: '峰面积归一化求和值不能为空！'
								},
								numeric: {
									message: '峰面积归一化求和值必须为数字！'
								},
								between: {
									min: "0",
									max: infinityNumber,
									inclusive: false,
									message: "峰面积归一化求和值必须大于0！"
								}

							}
						},
						iqr: {
							validators: {
								notEmpty: {
									message: 'IQR系数不能为空！'
								},
								numeric: {
									message: 'IQR系数必须为数字！'
								},
								between: {
									min: "0",
									max: infinityNumber,
									inclusive: false,
									message: "IQR系数必须大于0！"
								}

							}
						},
						rate: {
							validators: {
								notEmpty: {
									message: '倍数不能为空！'
								},
								numeric: {
									message: '倍数必须为数字！'
								},
								between: {
									min: "0",
									max: infinityNumber,
									inclusive: false,
									message: "倍数必须大于0！"
								}

							}
						},
						assignValue: {
							validators: {
								notEmpty: {
									message: '指定的值不能为空！'
								},
								numeric: {
									message: '指定的值必须为数字！'
								},
								between: {
									min: "0",
									max: infinityNumber,
									inclusive: false,
									message: "指定的值必须大于0！"
								}

							}
						},
						kValue: {
							validators: {
								notEmpty: {
									message: 'K值不能为空！'
								},
								integer: {
									message: 'K值必须为整数！'
								},
								between: {
									min: "0",
									max: infinityNumber,
									inclusive: false,
									message: "K值必须大于0！"
								}

							}
						},
					}
				})

			}

			function setColumns(value) {
				var element = $("input:checkbox[value=" + value + "]")
				if (element.is(":checked")) {
					$('#table').bootstrapTable('showColumn', value);
				} else {
					$('#table').bootstrapTable('hideColumn', value);
				}
			}

	</script>


}